<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <a href="http://baidu.com">百度</a>
        <a href="http://sina.com.cn">新浪</a>
        <a href="http://alibaba.com">阿里</a>
        <a onclick="fn(this,event)" href="http://qq.com">腾讯</a>
        <button onclick="my()">5</button>
        <button onclick="obj.fn6()">6</button>
        <button onclick="obj.fn7()">7</button>
        <button onclick="fn8()">8</button>
        <button onclick="fn9()">9</button>
        <button onclick="obj2.fn10()">10</button>
        <button onclick="fn11()">11</button>
    </div>
</body>
<script>
    const btns = document.querySelectorAll("a");
    btns[0].onclick = function(){
        alert(this.innerText);
    }
    btns[1].onclick = ()=>{
        alert(this.innerText);
    }
    btns[2].onclick = e=>{
        alert(btns[2].innerText);
        e.preventDefault();
    }
    function fn(_this,e){
        alert(_this.innerText);
        e.preventDefault();
    }
    function my(){
        "use strict";// 严格模式
        console.log(this);
    }
    const obj = {
        fn6(){
            console.log(this,this === obj);
        },
        fn7:()=>{
                console.log(this);
        }
    }
    const fn8 = obj.fn6;
    const fn9 = obj.fn7;

    class Box{
        fn10(){
            console.log(this,this === obj2);
        }
    }
    const obj2 = new Box();
    const fn11 = obj2.fn10;
</script>
</html>